<template>
    <div>
        <div style="padding-bottom: 20px;text-align: right;">
            <!-- <el-button
          :type="info.shoucang == 0 ? 'info' : 'success'"
          @click="clickShoucang"
        >{{ (info.shoucang == 0 ? "收藏" : "取消收藏") }}</el-button>-->
        </div>
        <el-row>
            <!-- 左侧 -->
            <el-col :span="12">
                <el-descriptions title="基本信息" border>
                    <!-- 基本信息 -->
                    <el-descriptions-item label="申请类型" span="1">{{ info.type == 1 ? '外单位人员工作餐' : '本单位人员工作餐'
                    }}</el-descriptions-item>
                    <el-descriptions-item label="申请时间" span="1">{{ formatYearMonthDay(info.createTime)
                    }}</el-descriptions-item>
                    <el-descriptions-item label="申请人" span="1">{{ info.shenqingname }}</el-descriptions-item>

                    <!-- 这里要获取事件状态 -->
                    <!-- 用户名称(申请\审核人) -->
                    <el-descriptions-item label="申请状态" span="1">
                        <el-tag v-if="info.approvalStates == 0" type="warning">审核</el-tag>
                        <el-tag v-if="info.approvalStates == 1" type="success">通过</el-tag>
                        <el-tag v-if="info.approvalStates == 2" type="danger">拒绝</el-tag>
                        <el-tag v-if="info.approvalStates == 3" type="info">撤销</el-tag>
                    </el-descriptions-item>

                    <!-- 差异信息 -->
                    <el-descriptions-item label="来客单位" span="6" v-if="info.type == 1">{{ info.unit }}</el-descriptions-item>
                    <el-descriptions-item label="来客人数" span="6" v-if="info.type == 1">{{ info.number
                    }}</el-descriptions-item>
                    <el-descriptions-item :label="people[info.type - 1]" span="6">{{ nameList
                    }}</el-descriptions-item>
                    <el-descriptions-item label="用餐标准" span="6">{{ info.haveDinnerStandard
                    }}</el-descriptions-item>
                    <el-descriptions-item :label="times[detail.type - 1]" span="6">{{ info.receptionTime
                    }}</el-descriptions-item>
                    <el-descriptions-item label="就餐地点" span="6" v-if="info.type == 2">{{ info.location
                    }}</el-descriptions-item>
                    <el-descriptions-item :label="shiyou[detail.type - 1]" span="6">{{ info.content
                    }}</el-descriptions-item>

                    <!-- 相关文件 -->
                    <el-descriptions-item label="附件" span="6">
                        <p v-for="(item, index) in info.url " :key="index" style>
                            <el-link :href="item.url" type="primary" target="_blank">{{ item.name }}</el-link>
                        </p>
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>

            <!-- 右侧 -->
            <el-col :span="10" :offset="1">
                <el-row>
                    <el-col :span="24">
                        <div style="  font-size: 16px;font-weight: 700;color: black;padding: 0px 0px 20px 0px;">
                            <b>审核进度</b>
                        </div>
                    </el-col>
                </el-row>
                <div v-for="(audi, idx) in auditors" :key="idx">
                    <el-row>
                        <el-col :span="24">
                            <div v-if="idx > 0" class="step-arrow">
                                <div>
                                    <i class="el-icon-caret-bottom" />
                                </div>
                            </div>
                        </el-col>
                    </el-row>

                    <div class="step">
                        <div class="step-title">
                            <el-row>
                                <el-col :span="8">
                                  <el-row>
                                    <el-col :span="12">
                                      <div class="step-title-left">{{ audi.name }}
                                      </div>
                                    </el-col>
                                    <el-col :span="12" v-if="urgingInedx == idx">
                                      <div @click="urgingBtn(audi,idx)" style="color: royalblue;font-weight: bold;" v-if="audi.sta==0">
                                          <i class="el-icon-s-promotion"> 催办</i>
                                        </div>
                                    </el-col>
                                  </el-row>
                                </el-col>
                                <el-col :span="8">
                                    <div class="step-title-center">
                                        <el-tag v-if="audi.sta == 0" size="mini" type="warning">未审核</el-tag>
                                        <el-tag v-if="audi.sta == 1" size="mini" type="primary">同意</el-tag>
                                        <el-tag v-if="audi.sta == 2" size="mini" type="danger">拒绝</el-tag>
                                        <el-tag v-if="audi.sta == 3" size="mini" type="info">撤回</el-tag>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="step-title-right">{{ audi.stepName }}</div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="step-info">
                            <el-row>
                                <el-col v-if="audi.sta > 0 && audi.msg == ''" :span="16">
                                    <div class="msg">
                                        <i>
                                            <b>意见：</b>无
                                        </i>
                                    </div>
                                </el-col>
                                <el-col v-if="audi.sta > 0 && audi.msg != ''" :span="16">
                                    <div class="msg">
                                        <i>
                                            <b>意见：</b>
                                            {{ audi.msg }}
                                        </i>
                                    </div>
                                </el-col>
                                <el-col v-if="audi.sta > 0" :span="8">
                                    <div class="img-qm">
                                        <el-image :src="audi.signimg" class="img-qm1" />
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="step-footer">
                            <el-row>
                                <el-col v-if="audi.sta > 0" :span="24">
                                    <div class="step-footer-right">{{ getFormatedTimeStr(audi.ts) }}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!-- {{auditors}} -->

        <!--    <el-descriptions title="用户信息" border>
          <el-descriptions-item v-for="(item,index,id) in info" :label="index" span="6">{{item}} </el-descriptions-item>
      </el-descriptions>-->
    </div>
</template>

<script>
import { websock } from "@/websock";
import moment from "moment";
import { getgongzuocan,urgingFlowApi } from "@/api2/xinjianfawen";

export default {
    // 组件名称
    name: "GongwenLiuzhuanDetail",
    props: {
        // ids: Number,
        id: Number
    },
    data() {
        return {
          urgingInedx:null,
            times: ["接待时间", "就餐时间"],
            people: ["陪同人员", "就餐人员"],
            shiyou: ["接待事由", "申请事由"],
            info: {},
            nameList: [],
            staStr: "",
            detail: {},
            auditors: []
        };
    },
    watch: {
        id(d1, d2) {
            console.log(d1, d2);
            this.info = {};
            const id = d1;
            // const taskId = this.ids;
            if (d1 == 0) return;
            // 这里要改
            console.log(id);
            getgongzuocan(id).then(async res => {
                this.info = res.data;
                this.info.type = res.data.workingLunch.type; //类型
                if (this.info.type == 1) {
                    this.info.number = res.data.workingLunch.number; //人数
                    this.info.unit = res.data.workingLunch.unit; //单位
                } else {
                    this.info.location = res.data.workingLunch.location; //单位
                }
                this.info.accompanyIds = res.data.workingLunch.accompanyIds; //陪同或就餐人员
                //获取所有人
                let arr = []
                const data = await websock.getContactList()
                data.forEach(item => {
                    if (item.userList) {
                        item.userList.forEach(items => {
                            arr.push({ uid: items.uid, name: items.name })
                        })
                    }
                })
                let name = []
                res.data.workingLunch.accompanyIds.split(',').forEach(item => {
                    arr.forEach(data => {
                        if (item == data.uid) {
                            name.push(data.name)
                        }
                    })
                })
                this.nameList = name.join(',')//显示用餐人员或陪同 人员名称
                this.info.shenqingname = res.data.workingLunch.createBy; //申请人
                this.info.createTime = res.data.workingLunch.createTime; //申请时间
                this.info.haveDinnerStandard = res.data.workingLunch.haveDinnerStandard; //餐标
                this.info.receptionTime = res.data.workingLunch.receptionTime; //接待或就餐时间
                this.info.content = res.data.workingLunch.content; //申请或接待事由
                this.info.url = res.data.workingLunch.accessoryBeans; //附件
                this.info.approvalStates = res.data.workingLunch.approvalState;
                this.approvalProcessDataBeanMaps =
                    res.data.workingLunch.approvalProcessDataBeanMap; //附件
                this.info.approvalProcessDataBeanMap = Array.from(
                    Object.values(res.data.workingLunch.approvalProcessDataBeanMap),
                    x => x
                );
                this.canUrge(this.info.approvalProcessDataBeanMap)
                websock
                    .getUserInfoByUid({
                        uid: this.info.workingLunch.uid
                    })
                    .then(data => {
                        console.log("this info", this.info);
                        this.$forceUpdate();
                    });
                this.auditors = [];
                for (const key in this.info.approvalProcessDataBeanMap) {
                    this.auditors.push(this.info.approvalProcessDataBeanMap[key]);
                    websock
                        .getUserInfoByUid({
                            uid: this.info.approvalProcessDataBeanMap[key].uid
                        })
                        .then(data => {
                            this.info.approvalProcessDataBeanMap[key].name = data.name;
                            this.info.approvalProcessDataBeanMap[key].signimg = data.signimg;
                            this.$forceUpdate();
                        });
                }
            });
        }
    },
    async mounted() {
        console.log(this.id, this.ids);
        const id = this.id;
        getgongzuocan(id).then(async res => {
            this.info = res.data;
            this.info.type = res.data.workingLunch.type; //类型
            if (this.info.type == 1) {
                this.info.number = res.data.workingLunch.number; //人数
                this.info.unit = res.data.workingLunch.unit; //单位
            } else {
                this.info.location = res.data.workingLunch.location; //单位
            }
            this.info.accompanyIds = res.data.workingLunch.accompanyIds; //陪同或就餐人员
            //获取所有人
            let arr = []
            const data = await websock.getContactList()
            console.log(data);
            data.forEach(item => {
                if (item.userList) {
                    item.userList.forEach(items => {
                        arr.push({ uid: items.uid, name: items.name })
                    })
                }
            })
            let name = []
            res.data.workingLunch.accompanyIds.split(',').forEach(item => {
                arr.forEach(data => {
                    if (item == data.uid) {
                        name.push(data.name)
                    }
                })
            })
            this.nameList = name.join(',')//显示用餐人员或陪同 人员名称
            console.log(this.nameList);
            // this.detail = res.data;
            this.info.shenqingname = res.data.workingLunch.createBy; //申请人
            this.info.createTime = res.data.workingLunch.createTime; //申请时间
            this.info.haveDinnerStandard = res.data.workingLunch.haveDinnerStandard; //餐标
            this.info.receptionTime = res.data.workingLunch.receptionTime; //接待或就餐时间
            this.info.content = res.data.workingLunch.content; //申请或接待事由
            this.info.url = res.data.workingLunch.accessoryBeans; //附件
            this.info.approvalStates = res.data.workingLunch.approvalState;
            this.approvalProcessDataBeanMaps =
                res.data.workingLunch.approvalProcessDataBeanMap; //附件
            this.info.approvalProcessDataBeanMap = Array.from(
                Object.values(res.data.workingLunch.approvalProcessDataBeanMap),
                x => x
            );
            this.canUrge(this.info.approvalProcessDataBeanMap)
            websock
                .getUserInfoByUid({
                    uid: this.info.workingLunch.uid
                })
                .then(data => {
                    this.$forceUpdate();
                });
            this.auditors = [];
            for (const key in this.info.approvalProcessDataBeanMap) {
                this.auditors.push(this.info.approvalProcessDataBeanMap[key]);
                websock
                    .getUserInfoByUid({
                        uid: this.info.approvalProcessDataBeanMap[key].uid
                    })
                    .then(data => {
                        this.info.approvalProcessDataBeanMap[key].name = data.name;
                        this.info.approvalProcessDataBeanMap[key].signimg = data.signimg;
                        this.$forceUpdate();
                    });
            }
        });
    },
    created() {
        this.fetchData();
    },
    methods: {
          // 判断可以催办哪个人
    canUrge(map) {
      const userId = JSON.parse(sessionStorage.getItem("loginUserinfo")).uid;
      for (let i = 0; i < map.length; i++) {
        let item = map[i];
        if (item.sta == 0) {
          if (item.uid != userId) {
            this.urgingInedx = i;
          }
          break;
        } else if (item.sta == 2 || item.sta == 3) {
          this.urgingInedx = null;
          return
        }
      }
    },

    // 催办
    urgingBtn(audi,idx) {
      console.log(this.detail, this.id)
      let data = {
        taskId: this.detail.id ? this.detail.id : this.id,
        position: idx,
        userId: audi.uid,
        type: "2"
      };
      urgingFlowApi(data)
        .then((res) => {
          if (res.code === 0) {
            this.msgSuccess("催办成功")
          } else {
              this.msgError("催办失败")
          }
        })
        .catch((err) => {
          console.log(err)
          this.msgError("催办失败")
        })
    },
        // 获取格式化时间字符串
        getFormatedTimeStr(stamp, str = "MM-DD HH:mm") {
            return moment(stamp).format(str);
        },
        fetchData() { },

        formatYearMonthDay(src) {
            return moment(src).format("YYYY-MM-DD");
        },
        getEventStaStr(sta) {
            if (sta === 1) {
                return "待审核";
            } else if (sta === 2) {
                return "通过";
            } else if (sta === 3) {
                return "拒绝";
            } else if (sta === 4) {
                return "撤销";
            }
        },
        getTaskStaStr(sta) {
            if (sta === 0) {
                return "未批示";
            } else if (sta === 1) {
                return "同意";
            } else if (sta === 2) {
                return "拒绝";
            } else if (sta === 3) {
                return "已撤回";
            }
        },
        onPageSizeChange(val) {
            this.pageCount = val;
            this.fetchData();
        },
        onCurrentPageChange(val) {
            this.pageIndex = val;
            this.fetchData();
        },
        async clickShoucang() {
            try {
                if (this.info.shoucang) {
                    await websock.cancelShoucang({ id: this.info.id, typ: 18 });
                    this.info.shoucang = 0;
                } else {
                    await websock.shoucangGongwen({
                        id: this.info.id,
                        typ: 18,
                        title: this.info.biaoti,
                        content: this.info.zhaiyao
                    });
                    this.info.shoucang = 1;
                }
            } catch (err) {
                console.error(err);
                this.$message.error(err.message || "error");
            }
        },
        cuibanShow(idx) {
      console.log(idx)
      if (!this.info.auditors) return false
      // 第一个 还没审核 可以催
      if (idx == 0) {
        if (this.info.auditors['auditor' + idx].sta == 0) {
          return true
        }
      } else {
        // 不是第一个
        // 上一个审核通过了
        if (this.info.auditors['auditor' + (idx - 1)].sta == 1) {
          // 这个还没审核
          if (this.info.auditors['auditor' + idx].sta == 0) {
            return true
          }
        }
      }
      return false
    },
    async cuiban(uid, sta="待审批") {
      await websock.cuiban({uid: uid, processName: '工作餐申请', processStatus: sta})
      this.$message.success('催办成功')
    }
    }
};
</script>

<style>
@import url("../../styles/detail.css");
</style>
